<template>
  <!-- 根容器：应用主题类名（light/dark） -->
  <div>
    <!-- 路由出口：根据路由规则渲染对应页面 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getToken } from './utils/storage';

// 引入全局样式（通用样式、主题变量）
import './assets/css/common.css';
import './assets/css/variables.css';
// 引入Element Plus样式（确保在自定义样式之后，方便覆盖默认样式）
import 'element-plus/dist/index.css';

// 路由实例
const router = useRouter();

// 初始化：检查登录状态（配合路由守卫，防止未登录访问受保护页面）
onMounted(() => {
  const token = getToken();
  // 如果没有token且当前不在登录页，强制跳转登录
  if (!token && !router.currentRoute.value.path.includes('/login')) {
    router.push('/login');
  }
});
</script>

<style scoped>
/* 根容器样式：确保占满全屏，继承主题变量 */
div {
  min-height: 100vh;
  /* 移除背景色设置，由body控制 */
  color: var(--el-text-color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
</style>